<!--
 * @Author: xujianwei
 * @Date: 2021-04-25 16:04:03
 * @LastEditors: xujianwei
 * @LastEditTime: 2021-04-25 16:32:19
-->
<template>
  <div class="demo">
    <app-form
      :model="formState" layout="inline" :schemas="searchSchemas"
    >
      <template #Button>
        <a-button type="primary" @click="onSearch">查询</a-button>
        <a-button style="margin-left: 10px" @click="onReset">重置</a-button>
      </template>
    </app-form>
  </div>
  <app-table
    :params="formState"
    :columns="columns"
    :row-key="'id'"
    :api="page"
    :pagination="false"
    :default-expand-all-rows="true"
    :set-api="{
      enable,
      disable,
    }"
    @list="getListFunc"
  >
    <template #isDeleted="{ text: isDeleted }">
      <span :class="isDeleted?'offline':'online'" class="status">
        {{ isDeleted ? "停用" : "启用" }}
      </span>
    </template>
    <template #operation="{record }">
      <a @click="goToDetail(record.id)">编辑</a>
    </template>
    <template #title><a-button type="primary" @click="goToDetail()">新增部门</a-button></template>
  </app-table>
</template>
<script lang="ts">
import { defineComponent, UnwrapRef, reactive, ref } from 'vue'

import { useRouter } from 'vue-router'
import { SearchFunc } from '@/components/table/data'
import { SearchButtonItem } from '@/components/form/data'
interface SearchState {
  nameCh: string;
}
export default defineComponent({
  setup (props, { emit, slots }) {
    const router = useRouter()
    const list = ref()
    const formState: UnwrapRef<SearchState> = reactive({
      nameCh: ''
    })
    const goToDetail = (id:number) => {
      router.push({ name: 'department-detail', query: { id } })
    }
    const onSearch = (item: string) => {
      list?.value(true)
    }
    const onReset = () => {
      formState.nameCh = ''
    }
    const getListFunc = (fn:SearchFunc) => {
      list.value = fn
    }
  const searchSchemas = [
  {
    field: 'nameCh',
    component: 'AInput',
    label: '部门名称',
    childProps: {
      placeholder: '请输入部门名称'
    }
  },
  SearchButtonItem
]
const columns = [
  {
    title: '部门名称',
    dataIndex: 'nameCh'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime'
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime'
  },
  {
    title: '状态',
    dataIndex: 'isDeleted',
    slots: { customRender: 'isDeleted' }
  },
  {
    title: '人数',
    dataIndex: 'staffs'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    slots: { customRender: 'operation' }
  }
]
  const page = '',enable = '',disable = ''
    return {
      columns,
      goToDetail,
      page,
      enable,
      disable,
      onSearch,
      onReset,
      getListFunc,
      searchSchemas,
      formState
    }
  }
})
</script>
